<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="${request.contextPath}/resources/image/desktop_logo-57.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="${request.contextPath}/resources/image/desktop_logo-72.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="${request.contextPath}/resources/image/desktop_logo-114.png">
    <title>100%喜帖</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/css/bootstrap.min.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/style.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/mhsc.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/jquery.fileupload.css">

    <link rel="stylesheet"  href="${request.contextPath}/resources/css/mobiscroll.icons.css" type="text/css" />
    <link rel="stylesheet"  href="${request.contextPath}/resources/css/mobiscroll.scroller.css" type="text/css" />
    <link rel="stylesheet"  href="${request.contextPath}/resources/css/mobiscroll.scroller.ios.css" type="text/css" />
    <link rel="stylesheet" href="${request.contextPath}/resources/css/lightbox.css">

    <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=IeptSRWHoB4ZGPmT7wpXB36vDpdqnU86&v=1.0"></script>
    <script src="${request.contextPath}/resources/js/load-image.all.min.js"></script>
	<!-- The Canvas to Blob plugin is included for image resizing functionality -->
	<script src="${request.contextPath}/resources/js/canvas-to-blob.min.js"></script>
	
    <style>
        body:before {
            content: ' ';
            position: fixed;
            z-index: -1;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: url(${request.contextPath}/resources/image/template_bg.jpg) center 0 no-repeat;
            background-size: cover;
        }
        
        .music-color{
        	color: #ff5b81;
        }
        
        #clipArea {
			margin: 20px;
			height: 300px;
		}

    </style>

</head>
<body style="background-image: url(${request.contextPath}/resources/image/template_bg.jpg); background-attachment: fixed;">

<!-- Modal -->
<div class="modal fade" id="select-music-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="margin: 2.5rem;">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: 1px solid #ff5b81; padding-bottom: 5px; color: #ff5b81;">
                选择音乐 Select Background Music
            </div>
            <div class="modal-body" style="padding: 0">
                <audio id="selected-music" src=""  loop="loop">
                    你的浏览器不支持audio标签。
                </audio>
                <ul class="list-group" id="select-music-ul">
                    <li id="nomusic" class="list-group-item">
                        不添加音乐
                    </li>
                    <li id="music-yssa" class="list-group-item">
                        一生所爱·卢冠廷
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-mysoul" class="list-group-item">
                        My Soul·July
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-jhhm" class="list-group-item">
                        结婚好么·李晟基
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-hljxq" class="list-group-item">
                        婚礼进行曲·尤大淳
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-hyjq" class="list-group-item">
                        花月佳期（Live）· 梅艳芳
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-lovehasall" class="list-group-item">
                        Love Has It All · 林依婷
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-couldbelove" class="list-group-item">
                        Could This Be Love · Victoria Acosta
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                    <li id="music-azx" class="list-group-item">
                        爱之喜 · Fritz Kreisler
                        <img src="${request.contextPath}/resources/image/music_play.png"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="focusesUs" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" style="padding: 2rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <h4 style="text-align: center; color: #ff3261">公众号：百分百喜帖</h4>
                        <img src="${request.contextPath}/resources/image/2weima.png">
                        <h3 style="text-align: center; color: #ff3261; margin-top: 1rem;">长按关注我们</h3>
                        <ul class="list-unstyled">
                            <li style="text-align: center; color: #ff3261;">制作属于自己的结婚请柬</li>
                            <li style="text-align: center; color: #ff3261;">www.100hunqing.cn</li>
                        </ul>
                        <p class="text-center"><img src="${request.contextPath}/resources/image/login_small.png"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="select-address" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 2.5rem;">
        <div class="modal-content">
            <div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="card_map_box">
                    <div id="allmap3"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--love story photo modal -->
<div class="modal fade" id="loveStoryPhotoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 2.5rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;"></div>
            <div class="modal-body">
                <div id="clipArea"></div>
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        		<button type="button" class="btn btn-primary" id="clipBtn">确认裁剪</button>
      		</div>
        </div>
    </div>
</div>
<!--love story photo modal -->

<!-- photos edit model-->
<div class="photosEditPanel" style="display:none">
	<div class="col-xs-3" style="width:4rem;height:7rem;margin:0.5rem">
		<a href="" data-lightbox="roadtrip">
             <img class="img-square" src="${request.contextPath}/resources/image/wedding_btn.png">
        </a>
        <div class="closeLayer">
          <img  src="${request.contextPath}/resources/image/photos_delete_btn.png" style="width:16px">
        </div>
	</div>
</div>
<!-- photos edit model-->
<!--photos modal -->
<div class="modal fade" id="uploadPhotosModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document" style="padding: 2rem 2rem;">
        <div class="modal-content">
            <div class="modal-header" style="border: none; padding-bottom: 0;"></div>
            <div class="modal-body" style="overflow-y: scroll; height:20rem;">
            	<div class="container-fluid">
            		 <div class="row" id="photosEditPanel"></div>
            	</div>
            </div>
            <div class="modal-footer">
            	<button type="button" class="btn btn-secondary-outline btn-sm pull-left" id="deletePhotosBtn">删除</button>
            	<button type="button" class="btn btn-secondary btn-sm" onclick="$('input[id=photos-upload]').click();">添加照片</button>
        		<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" id="saveBtn">确认</button>
      		</div>
        </div>
    </div>
</div>
<!--photos modal -->

<!-- alert message modal -->
	<div class="modal fade" id="alert-message-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-sm" role="document" style="padding: 2.5rem;">
        <div class="modal-content">
            <div class="modal-header">
            	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            	<h4>提示</h4>
            </div>
            <div class="modal-body">
               <span id="alert-message"></span>
            </div>
        </div>
    </div>
</div>
<!-- alert message modal -->

<div class="container-fluid">
    <div class="row">
        <div class="makecard-top">
            <div class="template_header">
                <a href="${request.contextPath}/templates/${invitationForm.templateId}/preview/v12"><img style="height: 25px; width: auto" src="${request.contextPath}/resources/image/icon_upload.png"></a>
				<a href="${request.contextPath}/templates/v12"><img style="height: 25px; width: auto;display: inline-block;float: right;" src="${request.contextPath}/resources/image/icon_hoem.png"></a>
            </div>

            <div class="template_title">
                <h5>制作喜帖 MAKE YOUR CARDS</h5>
            </div>
        </div>
        <div id="make-warp">
            <form action="${request.contextPath}/make" method="post" class="make-form" onsubmit="return checkForm();">
	            <div class="makecard_info">
	                <div class="input_title" style="margin-bottom: 20px;">
	                    <span class="serial">1</span>
	                    <h5>填写个人信息</h5>
	                    <input type="hidden" name="action" value="${invitationForm.action}">
	                    <input type="hidden" name="templateId" value="${invitationForm.templateId}">
	                    <input type="hidden" name="weddingInvitationId" value="${invitationForm.weddingInvitationId}">
	                </div>
	                <div class="form-warp">
                        <div class="form-group" style="margin-bottom: 20px;">
                            <input style="background-color: #ff5b81;"  type="text" datatype="*" class="form-control reste_input" nullmsg="请输入新郎姓名"  placeholder="新郎姓名 NAME" name="bridegroom" value="${invitationForm.bridegroom}">
							<div class="Validform_checktip"></div>
	                    </div>
                        <div class="form-group" style="margin-bottom: 20px;">
                            <input style="background-color: #ff5b81;"  type="text" datatype="*" class="form-control reste_input" nullmsg="请输入新娘姓名！" placeholder="新娘姓名 NAME" name="bride" value="${invitationForm.bride}" >
							<div class="Validform_checktip"></div>
	                    </div>
						<label>结婚日期 WEDDING DAY</label>
                        <div class="form-group" style="overflow: hidden;">
                            <div style="width: 40%; float: left;">
                                <input style="background-color: #ff5b81; text-align: right" id="date-jiehun-year" type="text" datatype="*" class="form-control reste_input" nullmsg="请输入结婚日期!" placeholder="年 Y" name="weddingDay_Y" value="${invitationForm.weddingDay_Y}">
                                <div class="Validform_checktip"></div>
                            </div>
                            <div style="width: 29%; float: left; margin-left: 1%;">
                                <input style="background-color: #ff5b81; text-align: right" id="date-jiehun-month" type="text" class="form-control reste_input" placeholder="月 M" name="weddingDay_M" value="${invitationForm.weddingDay_M}">
                            </div>
                            <div style="width: 29%; float: left; margin-left: 1%; ">
                                <input style="background-color: #ff5b81; text-align: right" id="date-jiehun-day" type="text" class="form-control reste_input" placeholder="日 D" name="weddingDay_D" value="${invitationForm.weddingDay_D}">
                            </div>
                        </div>
                        <label>婚礼地址 ADDRESS <font style="font-family: '微软雅黑';color:'#000';">(地址格式：*省*市*区*街道)</font></label>
                        <div class="form-group" style="overflow: hidden;">
                            <div style="width: 78%; float: left">
                                <input style="background-color: #ff5b81; margin-bottom: 3px;"  type="text" datatype="*" class="form-control reste_input" nullmsg="请输入酒店名称！" placeholder="酒店名称 NAME" name="hotel" id="hotel" value="${invitationForm.hotel}">
                                <textarea style="height:50px;" datatype="*" nullmsg="请输入酒店地址!" class="form-control reste_input wedding_address" rows="3" placeholder="酒店地址 ADD." name="address" id="hotelAddress" value="${invitationForm.address}">${invitationForm.address}</textarea>
                                <div class="Validform_checktip"></div>
                            </div>
                            <div style="width: 18%; float: left; margin-left: 0.5rem">
                                <img class="select_address" src="${request.contextPath}/resources/image/baidu_map.png">
                            </div>
                        </div>
                        <label>入席时间 THE TIME</label>
                        <div class="form-group" style="overflow: hidden;">
                            <div style="width: 50%; float: left;">
                                <input style="background-color: #ff5b81; text-align: right" id="time-ruxiH" type="text" datatype="*" class="form-control reste_input" nullmsg="请输入时间!" placeholder="时  HR" name="startTime_HR" value="${invitationForm.startTime_HR}">
                                <div class="Validform_checktip"></div>
                            </div>
                            <div style="width: 49%; float: left; margin-left: 1%;">
                                <input style="background-color: #ff5b81; text-align: right" id="time-ruxiM" type="text" class="form-control reste_input" placeholder="分  MIN"  name="startTime_MIN" value="${invitationForm.startTime_MIN}">
                                <div class="Validform_checktip"></div>
                            </div>
                        </div>
	                </div>
	            </div>

	            <div class="makecard_story">
	                <div class="next-page">
	                    <img src="${request.contextPath}/resources/image/arrow_down.png">
	                </div>
	                <div class="input_title">
	                    <span class="serial">2</span>
	                    <h5>我们的故事</h5>
	                    <!--
	                    <span class="select_btn">
	                        <input id="check-story" type="checkbox" name="loveStoryPictureSelected" <#if invitationForm??><#if invitationForm.loveStoryPictureSelected> checked</#if><#else>checked</#if>>
	                        <label for="check-story"></label>
	                    </span>
	                    -->
	                </div>
	                <div style="padding: 20px 20px 0 20px;">
                        <input id="loveStoryPicture" type="hidden" name="loveStoryPicture" value="${invitationForm.loveStoryPicture}">
	                    <div class="story_img_box" align="center">
	                        <img id="story_img" style="width: 100%" src="${request.contextPath}/resources/image/img_upload.jpg">
	                        <input id="story-upload" type="file" name="files" accept="image/*">
	                        <div id="story-progress" class="progress">
	                            <div class="progress-bar progress-bar-success"></div>
	                        </div>
	                        <!-- The container for the uploaded files -->
	                        <div id="story-files" class="files"></div>
	                    </div>

	                    <div class="img_tips">
	                        <p>点击上传一张照片</p>
	                        <!-- <p>可选模块，如不需要可取消</p> -->
	                    </div>
	                    <label>写下你们的爱情故事 LOVE STORY</label>
	                    <div class="form-group" style="margin-bottom: 20px;">
	                        <textarea style="height:120px;font-size: 1.2rem;" class="form-control reste_input" rows="5" placeholder="在最美好的年华遇到彼此，\n相知相恋，\n相约一生一起走。\n感谢命运让我们相遇，\n期待您的到来，\n与我们一起拉开新生活的序幕。" name="loveStoryContent" id="loveStoryContent" value="${invitationForm.loveStoryContent?trim}"><#if invitationForm.loveStoryContent != ''><#lt>${invitationForm.loveStoryContent?trim}<#rt></#if></textarea>
							<div class="Validform_checktip"></div>
	                    </div>
	                </div>

	            </div>

	            <div class="makecard_video">
	                <div class="next-page">
	                    <img src="${request.contextPath}/resources/image/arrow_down.png">
	                </div>
	                <div class="input_title">
	                    <span class="serial">3</span>
	                    <h5>拍摄邀请视频</h5>
	                    <!--
                        <span class="select_btn">
                            <input id="check-video" type="checkbox" name="loveStoryVideoSelected" <#if invitationForm??><#if invitationForm.loveStoryVideoSelected> checked</#if><#else>checked</#if>>
                            <label for="check-video"></label>
                        </span>
                        -->
	                </div>
	                <div style="padding: 20px 20px 0 20px;">
                        <input id="loveStoryVideo" type="hidden" name="loveStoryVideo" value="${invitationForm.loveStoryVideo}">
	                    <div class="video_box">
	                        <img src="${request.contextPath}/resources/image/video_paly.png"/>
	                        <input id="video-upload" type="file" name="files" accept="video/*">
	                        <div id="video-progress" class="progress">
	                            <div class="progress-bar progress-bar-success"></div>
	                        </div>
	                        <!-- The container for the uploaded files -->
	                        <div id="video-files" class="files"></div>
	                    </div>
	                    <div class="img_tips">
	                        <p>点击后拍摄邀请视频<br>安卓系统需先拍摄后上传</p>
	                        <!-- <p>可选模块，如不需要可取消</p> -->
	                    </div>
	                </div>
	            </div>

	            <div class="makecard_picture">
	                <div class="next-page">
	                    <img src="${request.contextPath}/resources/image/arrow_down.png">
	                </div>
	                <div class="input_title">
	                    <span class="serial">4</span>
	                    <h5>上传婚纱照片</h5>
	                </div>
	                <input id="photos-upload" type="file" name="files[]" accept="image/*" multiple style="display:none">
	                <div style="padding: 20px 20px 0 20px;">
                        <input id="weddingPhotos" type="hidden" name="weddingPhotos" value="${invitationForm.weddingPhotos}">
	                    <div class="wedding_photos" id="wedding_photos">
	                        <div class="wedding_btn">
	                            <img src="${request.contextPath}/resources/image/wedding_btn.png">
	                            <div id="photos-progress" class="progress progress-striped active">
	                                <div class="progress-bar progress-bar-success" role="progressbar" style="width: 0%;"></div>
	                            </div>
	                            <!-- The container for the uploaded files -->
	                            <div id="photos-files" class="files"></div>
	                        </div>
	                    </div>
	                    <div class="img_tips">
	                        <p>点击上传20张以内婚纱照片</p>
	                    </div>
	                </div>
	            </div>

	            <div class="makecard_music">
	                <div class="next-page">
	                    <img src="${request.contextPath}/resources/image/arrow_down.png">
	                </div>
	                <div class="input_title">
	                    <span class="serial">5</span>
	                    <h5>选择背景音乐</h5>
	                </div>
                    <div style="padding: 20px 20px 0 20px;">
	                    <div class="background_music" id="select-music">
	                        <div class="select_music clearfix">
	                            <img src="${request.contextPath}/resources/image/icon_music.png">
	                            <h4>选择音乐</h4>
	                            <div id="music-progress" class="progress">
	                                <div class="progress-bar progress-bar-success"></div>
	                            </div>
	                            <!-- The container for the uploaded files
	                            <div id="music-files" class="files"></div> -->

		                        <input id="backgroundMusic" type="hidden" name="backgroundMusic" value="${invitationForm.backgroundMusic}">
	                        </div>
	                        <div class="background_music_footer">
	                            <p>Background Music select</p>
	                        </div>
	                    </div>
	                    <div class="submit">
	                        <button type="submit" name="submit" value="preview" class="submit_span">预  览</button>
	                        <button type="submit" name="submit" value="save" class="submit_span" style="float: right">保  存</button>
	                    </div>
	                </div>
	            </div>
			</form>


        </div>
        <div id="makecard-footer">
            <img src="${request.contextPath}/resources/image/footer_logo.png">
            <div class="footer_info">
                <p>www.100hunqing.cn</p>
                <p>公众号:百分百喜帖</p>
            </div>
        </div>
    </div>
</div>
<script src="${request.contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<script src="${request.contextPath}/resources/js/jquery.ui.widget.js"></script>
<script src="${request.contextPath}/resources/js/jquery.iframe-transport.js"></script>
<script src="${request.contextPath}/resources/js/jquery.fileupload.js"></script>
<script src="${request.contextPath}/resources/js/jquery.fileupload-process.js"></script>
<script src="${request.contextPath}/resources/js/jquery.fileupload-image.js"></script>
<script src="${request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/resources/js/Validform_v5.3.2_min.js"></script>
<script src="${request.contextPath}/resources/js/mobiscroll.core.js"></script>
<script src="${request.contextPath}/resources/js/mobiscroll.scroller.js"></script>
<script src="${request.contextPath}/resources/js/mobiscroll.datetime.js"></script>
<script src="${request.contextPath}/resources/js/iscroll-zoom.js"></script>
<script src="${request.contextPath}/resources/js/hammer.js"></script>
<script src="${request.contextPath}/resources/js/lrz.all.bundle.js"></script>
<script src="${request.contextPath}/resources/js/jquery.photoClip.min.js"></script>
<script src="${request.contextPath}/resources/js/jquery.placeholder.min.js"></script>
<script src="${request.contextPath}/resources/js/lightbox.js"></script>

<script>
$("#loveStoryContent").placeholder();
var clipArea = new bjj.PhotoClip("#clipArea", {
	size: [150, 150],
	outputSize: [300, 300],
	file: "#story-upload",
	view: "#clipArea",
	ok: "#clipBtn",
	loadStart: function() {
		console.log("照片读取中");
	},
	loadComplete: function() {
		console.log("照片读取完成");
	},
	clipFinish: function(dataURL) {
		   $.ajax({ 
            url:"${request.contextPath}/uploadByBase64String", 
            data:{"base64String":dataURL}, 
            type:'post', 
            dataType:'json', 
            success: function(result) {
		       $("#loveStoryPicture").val(result.data);
			   $("#story_img").get(0).src = '${request.contextPath}/retrieve/'+result.data;
			   $("#loveStoryPhotoModal").modal('hide');
			   alert("上传成功！");
		    },
		    error: function(data){
		       alert("请重新上传！");
		    }
         })
	}
});

$(document).ready(
        function(){
           //$('#loveStoryContent').watermark('在最美好的年华遇到彼此，<br/>相知相恋，<br/>相约一生一起走。<br/>感谢命运让我们相遇，<br/>期待您的到来，<br/>与我们一起拉开新生活的序幕。',{color: 'white', left: -2, top: 10, fallback: true});
    	   $("#story-upload").change(function(){
          		$("#loveStoryPhotoModal").modal();
          	});
          	
          	$("#wedding_photos").click(function(){
          		$("#photosEditPanel").empty();
          		var weddingPhotos = $("#weddingPhotos").val();
          		if(weddingPhotos != "" && weddingPhotos != null){
          			var photos = weddingPhotos.split("|");
          			$.each(photos, function(n,value){
          				if(value != ""){
          					$(".photosEditPanel a").attr("href","${request.contextPath}/retrieve/"+value);
							$(".photosEditPanel .img-square").attr("src","${request.contextPath}/retrieve/"+value);
							$(".photosEditPanel .closeLayer").attr("onclick",'deletePhoto(this,"|'+value+'")');
							$(".photosEditPanel .closeLayer").hide();
							//克隆一个数据模板，追加
							$("#photosEditPanel").append($(".photosEditPanel").children().clone());
          				}
          			});
          		}
          		$("#uploadPhotosModal").modal();
          	});
          	
          	$("#deletePhotosBtn").click(function(){
          		$(".closeLayer").show();
          	});
          	
	        var url = '${request.contextPath}/upload';
	        /**
	        $('#story-upload').fileupload({
	            url: url,
	            autoUpload: true,
	            disableImageResize: false,
			    imageMaxWidth: 300,
			    imageMaxHeight: 200,
			    imageQuality: 5,
			    imageCrop: false ,
	            done: function (e, data) {
				    if(data.result.status == "success"){
					    $("#loveStoryPicture").val(data.result.data);
					    $("#story_img").get(0).src = '${request.contextPath}/retrieve/'+data.result.data;
					    alert("上传成功！");
					}else{
					    alert("请重新上传！");
					}
	            },
	            progressall: function (e, data) {
	                var progress = parseInt(data.loaded / data.total * 100, 10);
	                $('#story-progress .progress-bar').css(
	                        'width',
	                        progress + '%'
	                );
	            }
	        }).prop('disabled', !$.support.fileInput)
	                .parent().addClass($.support.fileInput ? undefined : 'disabled');
	            **/    
	        
	        $('#video-upload').fileupload({
	            url: url,
	            autoUpload: true,
	            done: function (e, data) {
				    if(data.result.status == "success"){
					    $("#loveStoryVideo").val(data.result.data);
					    alert("上传成功！");
					}else{
					    alert("请重新上传！");
					}
	            },
	            progressall: function (e, data) {
	                var progress = parseInt(data.loaded / data.total * 100, 10);
	                $('#video-progress .progress-bar').css(
	                        'width',
	                        progress + '%'
	                );
	            }
	        }).prop('disabled', !$.support.fileInput)
	                .parent().addClass($.support.fileInput ? undefined : 'disabled');
	                
	        $('#photos-upload').fileupload({
	            url: url,
	            autoUpload: true,
	           	disableImageResize: false,
			    imageMaxWidth: 800,
			    imageMaxHeight: 800,
			    imageQuality: 5,
			    imageCrop: false ,
	            done: function (e, data) {
				    if(data.result.status == "success"){
					    $("#weddingPhotos").val($("#weddingPhotos").val()+"|"+data.result.data);
					    //alert("上传成功！");
						$(".photosEditPanel a").attr("href","${request.contextPath}/retrieve/"+data.result.data);
						$(".photosEditPanel .img-square").attr("src","${request.contextPath}/retrieve/"+data.result.data);
						$(".photosEditPanel .closeLayer").attr("onclick",'deletePhoto(this,"|'+data.result.data+'")');
						//克隆一个数据模板，追加
						$("#photosEditPanel").append($(".photosEditPanel").children().clone());
					    
					    //$('#photos-progress .progress-bar').text("上传成功");
					}else{
					    alert("请重新上传！");
					    $('#photos-progress .progress-bar').text("上传失败");
					}
	            },
	            progressall: function (e, data) {
	                var progress = parseInt(data.loaded / data.total * 100, 10);
	                $('#photos-progress .progress-bar').css(
	                        'width',
	                        progress + '%'
	                );
	                $('#photos-progress .progress-bar').text(progress + '%');
	            }
	        }).prop('disabled', !$.support.fileInput)
	                .parent().addClass($.support.fileInput ? undefined : 'disabled');
        
		        $('#date-jiehun-year').mobiscroll().date({
		            theme: 'ios',
		            lang: 'zh',
		            display: 'top',                    
					dateFormat: 'yy-mm-dd',
					dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
		            minDate: new Date(2014, 12, 31),
		            maxDate: new Date(2099, 12, 31),
		            setText: '确定',
		            cancelText: '取消',
		            dateOrder: 'yymmdd',
		            yearText: '年',monthText:'月',dayText:'日',
		            onSelect: function (valueText, inst) {
		                var marryDate = new Date(valueText);
		                var marryYear = marryDate.getFullYear();
		                var marryMonth = marryDate.getMonth() + 1;
		                var marryDay = marryDate.getDate();
		                $('#date-jiehun-year').val(marryYear);
		                $('#date-jiehun-month').val(marryMonth);
		                $('#date-jiehun-day').val(marryDay);
		            }
		        });

		        $('#time-ruxiH').mobiscroll().time({
		            theme: 'ios',
		            lang: 'zh',
		            display: 'top',
		            headerText: false,
		            setText: '确定',
		            cancelText: '取消',
		            dateOrder: 'yymmdd',
		            timeFormat: 'HH:ii',
        			timeWheels: 'HHii',
		            yearText: '年',monthText:'月',dayText:'日',hourText:'时',minuteText:'分',
		            onSelect: function (valueText) {
		                var marryDate = new Date(valueText);
		                var marryHours = marryDate.getHours();
		                var marryMinutes = marryDate.getMinutes();
		                $('#time-ruxiH').val(valueText.split(":")[0]);
		                $('#time-ruxiM').val(valueText.split(":")[1]);
		            }
		        });
				
                $('.share_btn').on('click',function(e){
                    $('.callout').show();
                    e.stopPropagation()
                });

                $(document).on('click',function(e){
                    $('.callout').hide();
                });
				
                $('#select-music').on('click',function(){
                    $('#select-music-modal').modal();
                });

                $('.select_address').on('click',function(){
                    $('#select-address').modal();
                    setTimeout(function() {//添加延时加载。解决问题
                        // 百度地图API功能
                        var map = new BMap.Map("allmap3");
                        var point = new BMap.Point(116.331398,39.897445);
                        map.centerAndZoom(point,12);
                        var geoc = new BMap.Geocoder();
                        var local = new BMap.LocalSearch(map, {
                            renderOptions:{map: map}
                        });
                        //local.search("上海市浦东新区国展路");
						local.search($('.wedding_address').val()+$("#hotel").val());
                        function showAddress(e){
                            var pt = e.point;
                            geoc.getLocation(pt, function(rs){
                                var addComp = rs.addressComponents;
                                var address = addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
                                $('.wedding_address').val(address);
                            });
                            $('#select-address').modal('hide');

                        }
                        //map.addEventListener("click",showAddress);

                    },300);
                });
                $(".makeForm").Validform({
                    tiptype:function(msg,o,cssctl){
                        if(!o.obj.is("form")){
                            var objtip=o.obj.siblings(".Validform_checktip");
                            cssctl(objtip,o.type);
                            objtip.text(msg);
                        }
                    }
                });
				
                $('.list-group-item').find('IMG').hide();
                
				var oldMusicId = null;
                $('.list-group-item').on('click',function(){
                    var music = document.getElementById("selected-music");
                    var musicid = event.target.id;
                    //console.log(musicid);
                    if(oldMusicId == musicid && !music.paused){
                    	music.pause();
                    	$(this).find('IMG').hide();
                    	return;
                    }
                    if(musicid === "nomusic"){
                        music.src = null;
                    }else if(musicid === "music-yssa"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/yssa.mp3";
		                $('#backgroundMusic').val("resources/music/yssa.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-mysoul"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/mysoul.mp3";
		                $('#backgroundMusic').val("resources/music/mysoul.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-jhhm"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/bizniz.mp3";
		                $('#backgroundMusic').val("resources/music/bizniz.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-hljxq"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/hljxq.mp3";
		                $('#backgroundMusic').val("resources/music/hljxq.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-hyjq"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/live.mp3";
		                $('#backgroundMusic').val("resources/music/live.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-lovehasall"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/lovehasItall.mp3";
		                $('#backgroundMusic').val("resources/music/lovehasItall.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-couldbelove"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/couldthisbelove.mp3";
		                $('#backgroundMusic').val("resources/music/couldthisbelove.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }else if(musicid === "music-azx"){
                    	oldMusicId = musicid;
                        music.src = "${request.contextPath}/resources/music/azx.mp3";
		                $('#backgroundMusic').val("resources/music/azx.mp3");
                        if(music.paused){
                            music.play();
                        }else{
                            music.pause();
                        }
                    }
                    $('.list-group-item').find('IMG').hide();
                    $('.list-group-item').removeClass('music-color');
                    $(this).find('IMG').show();
                    $(this).addClass('music-color');
                });
                
                if($("#loveStoryContent").val().trim() != ""){
                	$("#loveStoryContent").text($("#loveStoryContent").val());
                }
            }
    );
    
    function deletePhoto(target, photo){
    	var resultPhotos = $("#weddingPhotos").val().replace(photo,"").trim();
    	$("#weddingPhotos").val(resultPhotos);
    	$(target).parent().remove();
    }
    
   function checkForm(){
   	 	if($("#hotel").val() == ""){
    		$("#alert-message").text("请输入酒店名称。");
    		$("#alert-message-modal").modal();
    		return false;
    	}
    	if(("#hotelAddress").val() == ""){
    		$("#alert-message").text("请输入酒店地址。");
    		$("#alert-message-modal").modal();
    		return false;
    	}
   }
</script>
</body>
</html>